import React, { Component } from 'react'
import axios from 'axios'

import Content from './Content';
import Page from './Page'

import './app.css'

// 项目中解决跨域问题
// 接口地址：http://open.douyucdn.cn/api/RoomApi/game
// 封装为两个组件，列表为一个组件，页码为一个组件 


export default class App extends Component {

  state = {
    gameList: [],
    current: 1,
    size: 15
  }
  
  // 生命周期函数挂载
  componentDidMount(){
    axios('/RoomApi/game').then(res => {
      console.log(res.data.data.slice(0,15));
      // 将请求的数据放在 state 中
      this.setState({
        gameList: res.data.data
      })
    })
  }

  // 用来获取子组件传递页面的地方
  getPage = (val)=>{
    // console.log(val);
    this.setState({
      current: val
    })
  }


  render() {

    const game_html = this.state.gameList.slice(
      (this.state.current - 1) * this.state.size,this.state.current * this.state.size
      ).map(item => {
      return <Content key={item.cate_id} item={item} />
    })

    return (
      <div>
        <ul>{game_html}</ul>


        {/* 
          做分页：
            1. 数据的总量 this.state.gameList.length
            2. 当前页 this.state.current
            3. 每页显示的数量 this.state.size
        */}

        {/* 判断有值之后再显示 page */}
        {
          this.state.gameList.length 
          && 
          <Page 
          allNum={this.state.gameList.length} 
          current={this.state.current} 
          size={this.state.size} 
          getPage={this.getPage}
          />
        }
      </div>
    )
  }
}
